<template>
  <div class="carousel">
    <!-- 饿了么轮播图 -->
    <!-- <el-carousel trigger="click" autoplay>
      <el-carousel-item v-for="item in carList" :key="item.id">
        <img :src="item.cover" alt="" />
        <h3>{{ item.title }}</h3>
      </el-carousel-item> -->
    <!-- 使用 加载 loading组件 -->
    <!-- <div class="loadingBox" v-if="flag">
        <Loading></Loading>
      </div> -->
    <!-- </el-carousel> -->
  </div>
</template>

<script>
  //  引入 加载组件
  // import Loading from '@/components/loading/loading01.vue';
  import { postCarousel } from '../../api/carousel.js';
  export default {
    name: 'carrousel',
    components: {
      // Loading,
    },
    data() {
      return {
        carList: [], // 存储轮播图数据
        flag: true,
      };
    },
    methods: {
      async getCarousel() {
        const { data: res } = await postCarousel();
        if (res) {
          this.flag = false;
        }
        this.carList = res.data;

        // console.log(res.data);
      },
    },
    created() {
      this.getCarousel();
    },
  };
</script>
<style scoped>
  @import url('../../state/css/carousel/carousel.css');
  /* //  设置 加载中样式 */
  .carousel {
    position: relative !important;
    top: 0;
    left: 0;
    /* width: 100%; */
    height: 400px;
    overflow: hidden;
    min-height: 220px;
    box-sizing: border-box;
    /* border: 3px solid salmon; */
    border-radius: 16px;
  }
  .loadingBox {
    position: absolute !important;
    width: 100%;
    top: 50%;
    /* // z-index: 999; */
    transform: translateY(-50%);
  }
</style>
